<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :model="searchParams" ref="searchParams" :inline="true">
          <el-form-item label="商家名称">
            <el-input class="input" v-model="searchParams.name" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="行业分类：">
            <el-select v-model="searchParams.trade" placeholder="请选择" clearable>
              <el-option v-for="item in tradeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch" type="primary" icon="el-icon-search"
              style="margin-left:40px">搜索</el-button>
          </el-form-item>
        </el-form>
        <div style="margin-bottom: 10px;color: red;">已选择筛选条件：{{ itemFilter || '未选择' }}</div>
        <el-table :data="dataList" size='medium' border>
          <el-table-column type="selection" width="55" align='center'></el-table-column>
          <el-table-column prop="id" label="id" width="50" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="行业名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="key" label="关键字" show-overflow-tooltip></el-table-column>
        </el-table>
        <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize"
          :page.sync="page" :limit.sync="size" @pagination="getDataList" />
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { findShopList } from '@/api/merchant/shop.js'
import { findTradeList } from '@/api/merchant/trade.js'
export default {
  data() {
    return {
      page: 1,
      size: 10,
      totalSize: 0,
      dataList: [],
      tradeList: [],
      searchParams: {},
      filter: {},
      itemFilter: '',
    }
  },
  created() {
    this.getDataList()
    this.findTradeList()
  },
  methods: {
    handleSearch(searchParams) {
      // this.searchParams = Object.assign(this.filter, searchParams)
      this.page = 1
      var keys = Object.keys(this.searchParams)
      var filter = ''
      for (var key of keys) {
        if (key == 'trade' && this.searchParams['trade']) {
          filter = filter + key + '=' + this.searchParams[key] + '&'
        }
        if (key == 'name' && this.searchParams['name']) {
          filter = filter + key + '=' + this.searchParams[key] + '&'
        }
      }
      this.itemFilter = filter.substring(0, filter.length - 1)
      this.getDataList()
    },
    // 获取列表数据
    getDataList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      this.searchParams.types = '1'
      findShopList(this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.dataList = res.data.data.list
        }
      });
    },
    findTradeList() {
      findTradeList().then(res => {
        if (res.data.code == 10000) {
          this.tradeList = res.data.data.list
        }
      });
    },
  },
}
</script>
<style scoped lang='scss'></style>
